<template>
    <div>
        <span>获取验证码({{ time }}s)</span>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";

let time = ref<number>(5)
// 接收父组件传过来的props->flag 用来控制计数器组件显示与隐藏
let props = defineProps(['flag'])
// 自定义事件传给父组件
let $emit = defineEmits(['getFlag'])

watch(
    () => props.flag,
    () => {
        let timer = setInterval(() => {
            time.value--
            if (time.value == 0) {
                // 通知父组件倒计时模式结束
                $emit('getFlag',false)
                // 清除定时器
                clearInterval(timer)
            }
        }, 1000)
    },
    {
        immediate: true
    }
)
</script>

<style scoped></style>